<template>
  <div>
    <el-card class="box-card">
      <div>
        <el-spqn>角色名称：
          <el-input v-model="input" placeholder="请输入内容" style="width: 30%"/>
          <el-button type="primary" style="margin-left: 30px">查询</el-button>
          <el-button>默认按钮</el-button>
        </el-spqn>
      </div>


      <div>
        <el-span class="el-dropdown-link">
          <!-- Form -->
          <el-button type="text" @click="dialogFormVisible = true">新增</el-button>

          <el-dialog title="新增" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="角色名称" :label-width="formLabelWidth">
                <el-input type="text" placeholder="请输入角色名称"/>
              </el-form-item>
              <el-form-item label="角色类型" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="请选择数据类型">
                  <el-option label="全部数据" value="shanghai"></el-option>
                  <el-option label="本机构数据" value="beijing"></el-option>
                  <el-option label="个人数据" value="beijing"></el-option>
                </el-select>
                <el-form-item label="描述" :label-width="formLabelWidth">
                  <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入内容"
                      v-model="textarea">
                  </el-input>
                </el-form-item>
              </el-form-item>
            </el-form>
            <el-divider></el-divider>
            <div slot="footer" class="dialog-footer" style="margin-right: 0">
              <el-button @click="dialogFormVisible = false">关 闭</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
          </el-dialog>

          <el-dropdown>
            <el-button plain>
              批量操作
              <svg t="1654231867884" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                   p-id="2287" width="12" height="12">
                <path
                    d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z"
                    p-id="2288" fill="#409EFF"></path>
              </svg>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-delete">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-span>
      </div>


        <div style="margin-top: 20px">
          <el-table
              border
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">

            <el-table-column
                type="selection"
                width="35">
            </el-table-column>
            <el-table-column
                label="#"
                width="160">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
                label="角色名称"
                width="200">
              <template slot-scope="scope">{{ scope.row.number }}</template>
            </el-table-column>
            <el-table-column
                label="数据类型"
                width="300">
              <template slot-scope="scope">{{ scope.row.info }}</template>
            </el-table-column>
            <el-table-column
                label="描述"
                width="200">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="100">
              <template slot-scope="scope">{{ scope.row.operator }}</template>
            </el-table-column>
          </el-table>
        </div>

    </el-card>
  </div>

</template>

<script>
export default {
  name: "RoleList",
  input: '',
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      textarea: '',
    }
  }


}
</script>


<style scoped>

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
  overflow: hidden;
  transition: all 0.5s;
}


.box-card {
  margin: 10px 10px 10px 10px;
  height: 600px;
}

</style>
